<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计时器</title>
</head>
<body>
<!--input:定义表单项
    type="button":定义按钮类型
    onclick="on()":点击时调用on()方法
    value="开灯":-->
<input type="button" onclick="on()" value="开灯">
<!--img:插入图片
    id="myImage":唯一标识
    border:定义图片边框
    src:加载图片资源
    style="text-align:center;":文本对齐方式-->
<img id="myImage" border="0" src="../imgs/off.gif" style="text-align:center;">
<input type="button" onclick="off()" value="关灯">

<script>
    /*需求：
        每隔1秒，灯泡自动切换一次状态*/
    //定义开灯方法
    function on(){
        //document对象的getElementById()方法：返回对拥有指定 id 的第一个对象的引用。
        document.getElementById('myImage').src='../imgs/on.gif';
    }

    function off(){
        document.getElementById('myImage').src='../imgs/off.gif';
    }

    setInterval(function () {
        on();
    }, 2000);

    setTimeout(function () {
        setInterval(function () {
            off();
        }, 2000);
    }, 1000);
</script>
</body>
</html>